<template>
    <!-- 首页 -->
    <div class="home">
        <div class="anTitle">统计分析</div>
        <div class="anContent">
            <HomeAnalysis v-for="item in homeData" :obj="item" :key="item.name"></HomeAnalysis>
        </div>
        <div class="anTitle">近12月放款趋势</div>
        <div class="anContent">
            <div id="main" style="width: 100%; height: 400px"></div>

        </div>
        <div class="anTitle">近12月用户增长趋势</div>
        <div class="anContent">
            <div id="main1" style="width: 100%; height: 400px"></div>
        </div>
    </div>
</template>

<script setup>
import HomeAnalysis from "./components/homeAnalysis.vue";
import { homeData } from "@/utils/enum.js";
import { computed, ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
    init();
});
function init() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: "",
        },
        tooltip: {},
        legend: {
            data: ["销量"],
        },
        xAxis: {
            data: [
                "2022年11月",
                "2022年12月",
                "2023年01月",
                "2023年02月",
                "2023年03月",
                "2023年04月",
                "2023年05月",
                "2023年06月",
                "2023年07月",
                "2023年08月",
                "2023年09月",
                "2023年10月",
                "2023年11月",
            ],
        },
        yAxis: {},
        series: [
            {
                name: "单位 万元",
                type: "line",
                data: [
                    256, 598, 570, 889, 789, 762, 685, 568, 687, 895, 765, 654,
                    465,
                ],
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById("main1"));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: "",
        },
        tooltip: {},
        legend: {
            data: ["销量"],
        },
        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "2022年11月",
                "2022年12月",
                "2023年01月",
                "2023年02月",
                "2023年03月",
                "2023年04月",
                "2023年05月",
                "2023年06月",
                "2023年07月",
                "2023年08月",
                "2023年09月",
                "2023年10月",
                "2023年11月",
            ],
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                name: "单位 个",
                type: "line",
                data: [
                    116, 128, 110, 279, 189, 212, 245, 218, 227, 215, 245, 184,
                    212,
                ],
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
}
</script>

<style lang="less" scoped>
// .home {
//   display: flex;
//   flex-wrap: wrap;
// }
.anTitle {
    font-weight: bolder;
}
.anContent {
    // height: 200px;
    margin: 20px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
</style>
